<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>账户管理</el-breadcrumb-item>
                <el-breadcrumb-item>借款详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--表头导航栏模块-->
        <div>
            <el-form :inline="true"
                     :model="formInline"
                     ref="fm"
                     class="demo-form-inline">
                <el-form-item label="查找" prop="lName">
                    <el-input v-model="formInline.lName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item prop="lMobile">
                    <el-input v-model="formInline.lMobile" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item prop="lReceiptNo">
                    <el-input v-model="formInline.lReceiptNo" placeholder="借据号"></el-input>
                </el-form-item>
                <el-form-item prop="lProductName">
                    <el-input v-model="formInline.lProductName" placeholder="借款产品"></el-input>
                </el-form-item>
                <el-form-item prop="lInvestorName">
                    <el-input v-model="formInline.lInvestorName" placeholder="资方名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="queryLoad">查询</el-button>
                    <el-button icon="el-icon-delete"  @click="resetForm('fm')">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--主体内容模块-->
        <div>
            <el-table
                    :data="tableData"
                    :row-style="selectedstyle"
                    style="width: 100%">
                <el-table-column
                        prop="lId"
                        label="id"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lName"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lIdcard"
                        label="身份证"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="lProductName"
                        label="产品类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="lUid"
                        label="用户标识"
                        width="260">
                </el-table-column>
                <el-table-column
                        prop="lLoadStatus"
                        label="状态"
                        show-overflow-tooltip
                        :formatter="passformtype">
                </el-table-column>

                <el-table-column
                        prop="lReceiptNo"
                        label="借据号"
                        width="310">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button  @click="handleClick(scope.row.lId)"  size="small" type="warning" round>查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5,10,20,30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Loadmanager",
        data(){
            return{
                //主体数据
                tableData: [],
                //条件查询参数
                formInline: {
                    lName :'',
                    lMobile:'',
                    lReceiptNo:'',
                    lProductName:'',
                    lInvestorName:''
                },
                pageNum: 1,
                pageSize: 5,
                total:0,//共多少条
            }
        },
        methods:{
            //根据信息来渲染不同的布局属性
            selectedstyle ({row, rowIndex}) {
                if(row.lLoadStatus==0){
                    return {
                        "background-color": "#C9C5C8"
                    };
                }else if(row.lLoadStatus==1){
                    return {
                        "background-color": "#A9EB9D"
                    };
                }
            },
            //清空from表单函数  ?
            resetForm(formName) {
                this.$refs['fm'].resetFields();
            },
            handleSizeChange(size){
                this.pageSize = size;
                this.queryLoad();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.queryLoad();
            },
            passformtype(row, column, cellValue){
                if (cellValue == 0){
                    return '已拒绝';
                }else if (cellValue == 1){
                    return '已放款';
                }
            },
            handleClick(lId){//跳转显示详细信息
                this.$router.push("/loadDetailed/"+lId);
            },
            queryLoad(){
                let url=this.$baseUrl+"loanApplication/showLoan"
                this.$axios.get(url,{
                    params: {
                        lName :this.formInline.lName,
                        lMobile:this.formInline.lMobile,
                        lReceiptNo:this.formInline.lReceiptNo,
                        lProductName:this.formInline.lProductName,
                        lInvestorName:this.formInline.lInvestorName,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }}).then(res=>{
                    if (res.data.code == 200){
                        this.tableData = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total
                    }else {
                        this.$alert(res.data.msg)
                    }
                })
            }
        },
        created(){
            this.queryLoad();
        }
    }
</script>

<style scoped>

</style>